.wrap{
    border: 1px solid #dbdbdb;
    padding: 10px 10%;
    .shopping-status{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shooping-progress{
            display: flex;
            align-items: center;
            >i{
                margin-right: 10px;
            }
            >p{
                margin: 0;
                margin-right: 10px;
            }
            .shopping-division{
                width: 100px;
                height: 1px;
                background: #cfcfcf;
            }
            .checked{
                color: #c10000;
            }
            .unchecked{
                color: #cfcfcf;
            }
        }
        .con-shopping{
            color: #333;
            &:hover{
                text-decoration: none;
            }
        }
    }
}
main{
    width: 80%;
    margin: 0 auto;
    .shopping-status{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shooping-progress{
            display: flex;
            align-items: center;
            >i{
                margin-right: 10px;
            }
            >p{
                margin: 0;
                margin-right: 10px;
            }
            .shopping-division{
                width: 100px;
                height: 1px;
                background: #cfcfcf;
            }
            .checked{
                color: #c10000;
            }
            .unchecked{
                color: #cfcfcf;
            }
        }
        .con-shopping{
            color: #333;
            &:hover{
                text-decoration: none;
            }
        }
    }
    .table-head{
        display: flex;
        background: #e9e9e9;
        line-height: 40px;
        height: 40px;
        justify-content: space-around;
        text-align: center;
        margin-top: 10px;
        >div{
            flex-grow: 1;
        }
        .shopping-goods{
            flex-grow: 3;
        }
    }
    table{
        width: 100%;
        tr{
            border-bottom: 1px dotted #dddddd;
            td{
                width: 100%;
                height: 140px;
                margin: 10px 0;
                &:nth-child(1){
                    text-align: center;
                    width: 50px;
                }
                &:nth-child(2){
                    width: 120px;
                }
                &:nth-child(3){
                    padding: 20px;
                    width: 300px;
                    text-align: left;
                    box-sizing: border-box;
                    p{
                        font-size: 12px;
                        color: #000000;
                    }
                    span{
                        display: block;
                        margin: 0;
                        font-size: 10px;
                        color: #808080;
                    }
                }
                &:nth-child(4){
                    text-align: center;
                    width: 200px;
                }
                &:nth-child(5){
                    text-align: center;
                    width: 200px;
                    >button{
                        width: 30px;
                        height: 30px;
                        border: 1px solid #d5d5d5;
                        background: #fff;
                        margin: 0 10px;
                    }
                }
                &:nth-child(6){
                    text-align: center;
                    width: 200px;
                }
                &:nth-child(7){
                    text-align: center;
                    width: 200px;
                    >a{
                        color: #333333;
                    }
                }
            }
            &:last-child{
                border-bottom: none;
            }
        }
        
    }
    .table-bottom{
        width: 100%;
        height: 40px;
        background: #e9e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .allslect{
            display: flex;
            align-items: center;
            margin-left: 10px;
            >input{
                margin-right: 10px;
            }
            >span{
                font-size: 12px;
            }
        }
        .delete{
            font-size: 12px;
        }
        .account{
            height: 100%;
            >span{
                font-size: 12px;
                color: #808080;
                margin: 0 10px;
                >i{
                    font-style: normal;
                    color: #db0000;
                    margin: 0 5px;
                }
            }
            >button{
                width: 120px;
                height: 100%;
                background: #8e8e8e;
                border: none;
                font-size: 10px;
                >a{    
                    display: block;
                    width: 100%;
                    height: 100%;
                    line-height: 40px;            
                    color: #fff;
                    &:hover{
                        text-decoration: none;
                    }
                }
            }
        }
    }
}